<template>
	<view>
		<view class="samebox flex-between u-m-tb-10 u-p-20">
			<text>课程名称</text>
			<input type="text" v-model="classname" placeholder="请输入课程名称" />
		</view>

		<view class="samebox flex-between u-m-tb-10 u-p-20" @click="areashow = true">
			<text>教学领域</text>
			<!-- <input type="text" v-model="classarea" placeholder="请输入教学领域" /> -->
			{{classarea}}
		</view>

		<view class="samebox flex-between u-m-tb-10 u-p-20">
			<text>教学目标</text>
			<input type="text" v-model="classmb" placeholder="请输入教学目标" />
		</view>

		<view class="samebox flex-between u-m-tb-10 u-p-20">
			<text>重点难点</text>
			<input type="text" v-model="classdifficult" placeholder="请输入重点难点" />
		</view>

		<view class="samebox flex-between u-m-tb-10 u-p-20" @click="pickshow = true">
			<text>适用学生年龄</text>
			<view class="flex-between">
				
				<text >{{age}}</text>
				<u-icon color='#1972DF' name='arrow-right'></u-icon>
			</view>
		</view>

		<view class="nengli u-p-20" @click="show = true">
			<view class="samebox flex-between u-m-tb-10 ">
				<text>学生能力培养</text>
				<view class="flex-between" >
					<!-- <input type="text"  placeholder="请选择学生能力培养" /> -->
					<text style="color: #999">请选择学生能力培养</text>
					<u-icon color='#1972DF' name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="nlbox ">
				<scroll-view scroll-x="true" style="white-space: nowrap; width: 90%;">
					<view class="u-p-tb-20">
						<text class="tipitem u-font-24" v-for="i in nllist">{{i}}</text>
					</view>
				</scroll-view>
				<view class="iconbox u-m-lr-30" @click.stop="addshow = true">
					<u-icon color='#1972DF' name='plus'></u-icon>
				</view>
			</view>
		</view>

		<view class="samebox flex-between u-m-tb-10 u-p-20">
			<text>新增目标</text>
			<input type="text" v-model="newAim" placeholder="请输入新增目标" />
		</view>

		<view class="samebox flex-between u-m-tb-10 u-p-20">
			<text>教学设备及场地</text>
			<input type="text" v-model="sbcd" placeholder="请输入教学设备及场地" />
		</view>

		<view class="samebox  u-m-tb-10 u-p-20">
			<text>教学主要环节</text>
			<textarea v-model="teachingSteps" maxlength="-1" placeholder="请输入教学主要环节"></textarea>
			<view class="btn u-m-tb-30 u-p-tb-30 ">
				<view class="btnitem u-radius-10" v-if="start==1" @click="aistatr" >
					AI辅助生成
				</view>
				<view class="btnitem1 u-radius-10" v-else-if="start==2"  >
					生成中
				</view>
				<view class="btnitem2 u-radius-10" v-else  >
					已生成
				</view>
			</view>
		</view>

		<view class="samebox  u-m-tb-10 u-p-20">
			<text>评分标准及建议评分用语</text>
			<textarea v-model="proposal" :disabled='start==2'  placeholder="请输入评分标准及建议评分用语,最多500字"></textarea>
		</view>

		<view class="samebox flex-between u-m-tb-10 u-p-20">
			<text>发布背景简历及联系邮箱</text>
			<u-switch :disabled='start==2' v-model="value" @change="changesw"></u-switch>
		</view>


		<u-popup :show="show" :round="10" :closeable='true' mode="bottom" @close="close" @open="open">
			<view>
				<view class="flex-center u-m-tb-30">
					请选择能力
				</view>
				<scroll-view scroll-y="true" class="ability">
					<view class="flex-around">
						<u-checkbox-group placement="column" iconPlacement="right" @input='cheinput' @change="checkboxChange">
							<u-checkbox :customStyle="{marginBottom: '16px'}" v-for="(item, index) in checkboxList1"
								:key="item.id" :label="item.name" :name="item.id">
							</u-checkbox>
						</u-checkbox-group>
					</view>

				</scroll-view>
				<u-line></u-line>
				<view class="flex-around u-p-tb-30">
					<text @click="show = false">取消</text>
					<text @click="sure">确定</text>
				</view>
			</view>
		</u-popup>


		<u-popup :show="addshow" :round="10" :closeable='true' mode="center" @close="addclose" @open="addopen">
			<view style="width: 566rpx;">
				<view class="flex-center u-p-tb-50">
					新增能力指标
				</view>
				<input class=" u-p-20" @input="mineinput" v-model="nlname" style="text-align: center;" type="text"
					placeholder="请输入新增的能力指标,最多6个字" />
			</view>
			<u-line></u-line>
			<view class="flex-around u-p-20">
				<text @click="addclose">取消</text>
				<text @click="addsure" style="color: #576B95;">确定</text>
			</view>
		</u-popup>


		<view v-if="isexpert" @click="submit(0)" class="public flex-center u-radius-10  ">
			提交
		</view>
		<view class="" v-else>
			<view @click="submit(1)" class="self  flex-center u-radius-10 ">
				自用发布
			</view>
			
			<view @click="submit(0)" class="public flex-center u-radius-10  ">
				公开发布
			</view>
		</view>
	
		<u-picker :show="pickshow" ref="uPicker" :columns="columns" :zxc='1' @cancel='pickshow=false' @confirm="confirm" @change="changeHandler"></u-picker>
		<teachertabbar v-if="!isexpert" :value='1'></teachertabbar>
		
		<u-picker :show="areashow" keyName='area_name'  @cancel='areashow=false'  @confirm="areaconfirm" :columns="areacolumns"></u-picker>
	</view>
</template>

<script>
	import teachertabbar from '../../components/teachertabbar.vue';
	export default {
		components: {
			teachertabbar
		},
		data() {
			return {
				nlname:'',
				areashow:false,
				sbcd:'',
				areacolumns:[],
				pickshow:false,
				value: false,
				show: false,
				addshow: false,
				classname: '',
				age: '请选择适用学生年龄',
				columns: [],
				proposal:'',
				classarea: '请选择教学领域',
				classmb: '',
				teachingSteps:'',
				classdifficult: '',
				nllist: [],
				checkboxList1: [],
				isexpert:0,
				newAim:'',
				numnllist:[],
				id:'',
				c_release:0,
				start:1
			};
		},
		onLoad(opt) {
			this.isexpert = opt.isexpert
			this.id = opt.id
			this.initcolumns()
			this.getabilty()
			this.getarea()
			if(this.id){
				this.init()
				uni.setNavigationBarTitle({
					title:'修改课程'
				})
			}
		},
		// watch:{
		// 	nlname(newval,oldval){
		// 		console.log(newval,oldval);
		// 		setTimeout(()=>{
		// 			this.nlname = 1
		// 		},1000)
		// 	}
		// },
		methods: {
			mineinput(e){
				console.log(e.detail.cursor);
				console.log(this.nlname);
				if(e.detail.cursor>=6){
					 this.$toast('最多输入六个字')
				}
				
				this.$nextTick(() => {
				  this.nlname = this.nlname.substring(0,6)// 在下一个更新周期之前执行这个回调函数
				})
			},
			getarea(){
				this.$api.get('/assistant/xCourse/gainTeachingArea',{}).then(res=>{
					this.areacolumns = [res.data]
				})
			},
			aistatr(){
				if(!this.classname){
					return this.$toast('请输入课程名称~')
				}
				if(!this.classarea){
					return this.$toast('请输入教学领域~')
				}
				if(!this.classmb){
					return this.$toast('请输入教学目标~')
				}
				if(!this.classdifficult){
					return this.$toast('请输入重点难点~')
				}
				if(!this.age){
					return this.$toast('请输入适用学生年龄~')
				}
				if(!this.nllist){
					return this.$toast('请输入学生能力培养~')
				}
				if(!this.newAim){
					return this.$toast('请输入新增目标~')
				}
				if(!this.sbcd){
					return this.$toast('请输入教学设备及场地~')
				}
				
				uni.showLoading({
					title:'AI生成中~',
					
				})
				this.start =2
				this.$api.post('/device/xAiTemplate/generateLessonPlan',{
					templateCode:'t-001',
					question:'课程名称:' + this.classname + ',' + '教学领域:' + this.classarea + ','
					+ '教学目标:' + this.classmb + ','+ '重点难点:' + this.classdifficult + ','
					+ '适用学生年龄:' + this.age + ','+ '学生能力培养:' + this.nllist.join(',') + ','
					+ '新增目标:' + this.newAim + ','
					+ '教学设备及场地:' + this.sbcd 
				}).then(res=>{
					this.teachingSteps = res.data
					uni.hideLoading()
					this.start =3
				}).catch(err=>{
					uni.hideLoading()
					this.start =1
					uni.$toast('生成失败！请重试')
				})
			},
			init(){
				this.$api.get('/assistant/xCourse/getInfo',{
					id:this.id,
				}).then(res=>{
					this.classarea = res.data.teachingArea
					this.classdifficult = res.data.importantDifficult
					this.classname = res.data.c_name
					this.classmb = res.data.teachingAim
					this.nllist = res.data.abilityIDList.map(item=>{
						return item.name 
					})
					this.numnllist = res.data.abilityIDList.map(item=>{
						return item.id 
					})
					this.value = res.data.is_show==1?true:false
					this.newAim = res.data.newAim
					this.sbcd = res.data.teachingEtc
					this.teachingSteps = res.data.teachingSteps
					this.proposal = res.data.proposal
					this.age = res.data.age
				})
			},
			getabilty(){
				this.$api.get('/ability/xAbility/create',{}).then(res=>{
					this.checkboxList1 = res.data
				})
			},
			submit(c_release){
				if(this.start==2){
					return false
				}
				if(this.id){
					
					this.$api.post('/assistant/xCourse/modify',{
						age:this.age,
						id:this.id,
						c_name:this.classname,
						c_release,
						importantDifficult:this.classdifficult,
						is_show:this.value==true?1:0,
						newAim:this.newAim,
						proposal:this.proposal,
						scoringCriteria:'12312',
						teachingAim:this.classmb,
						teachingArea:this.classarea,
						teachingSteps:this.teachingSteps,
						teachingEtc:this.sbcd,
						abilityIDList:this.numnllist
					}).then(res=>{
						this.$toast(res.message)
						if(res.code == 200){
							setTimeout(()=>{
								uni.redirectTo({
									url:'../index/index'
								})
							},1000)
						}
					})
				}else{
					this.$api.post('/assistant/xCourse/publish',{
						age:this.age,
						c_name:this.classname,
						c_release,
						importantDifficult:this.classdifficult,
						is_show:this.value==true?1:0,
						newAim:this.newAim,
						proposal:this.proposal,
						scoringCriteria:'12312',
						teachingAim:this.classmb,
						teachingArea:this.classarea,
						teachingSteps:this.teachingSteps,
						teachingEtc:this.sbcd,
						abilityIDList:this.numnllist
					}).then(res=>{
						this.$toast(res.message)
						if(res.code == 200){
							setTimeout(()=>{
								uni.redirectTo({
									url:'../index/index'
								})
							},1000)
						}
					})
				}
				
			},
			initcolumns(){
				let arr = []
				let arr1 = []	
				let i;
				for(i=1;i<30;i++){
					arr.push(i)
					arr1.push(i)
				}
				this.columns.push(arr)
				this.columns.push(arr1)
				console.log(this.columns);
			},
			cheinput(n){
				this.nllist = n
			},
			checkboxChange(n) {
				console.log('change', n);
				this.numnllist = n
			},
			sure() {
				this.show = false
			},
			confirm(e){
				this.pickshow = false
				console.log(e);
				this.age = e.value[0] + '至' + e.value[1] +'岁'

			},
			areaconfirm(e){
				console.log(e);
				this.areashow = false
				this.classarea = e.value[0].area_name	
			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				
				if (columnIndex === 0) {
					this.loading = true
					// 模拟网络请求
					// uni.$u.sleep(1500).then(() => {
					// 	picker.setColumnValues(1, this.columnData[index])
					// 	this.loading = false
					// })
				}
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			addopen() {
				// console.log('open');
			},
			addclose() {
				this.addshow = false
				// console.log('close');
			},
			addsure() {
				this.$api.post('/ability/xAbility/create',{
					name:this.nlname
				}).then(res=>{
					this.$toast(res.message)
					this.addshow = false
					this.getabilty()
				})
			},
			changesw(e) {
				this.value = e
				console.log(e);
			},
		}
	}
</script>

<style lang="scss">
	.samebox {
		background-color: #fff;

		input {
			text-align: right;
		}

		textarea {
			width: 100%;
		}
	}

	.nengli {
		background-color: #fff;

		.nlbox {
			display: flex;
			align-items: center;

			.iconbox {
				border: 1rpx solid $main-color;
				padding: 5rpx;
			}

			.tipitem {
				border-radius: 50rpx;
				padding: 5rpx 20rpx;
				color: #CAC5C5;
				border: 1rpx solid #CAC5C5;

				&:nth-child(n+2) {
					margin-left: 30rpx;
				}
			}
		}
	}

	.u-checkbox-label--right {
		flex-direction: row-reverse;
		justify-content: space-between;
		width: 500rpx;
	}

	.ability {
		height: 500rpx;
	}

	.btn {
		display: flex;
		justify-content: end;

		.btnitem {
			background-color: $main-color;
			color: #fff;
			padding: 10rpx 20rpx;
		}
		.btnitem1{
			background-color: #9BE8A1;
			color: #fff;
			padding: 10rpx 20rpx;
		}
		.btnitem2{
			background-color: #B9BBBF;
			color: #fff;
			padding: 10rpx 20rpx;
		}
	}

	.public {
		background-color: $main-color;
		color: #fff;
		padding: 20rpx 100rpx;
		width: 200rpx;
		margin: 50rpx auto;
	}

	.self {
		background-color: #07C160;
		color: #fff;
		padding: 20rpx 100rpx;
		width: 200rpx;
		margin: 50rpx auto;
	}
</style>